<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>问诊</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="css/ask.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/zepto.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
<div class="doc-list-all">
    <div class="doc-li-header">
        <i class="fa fa-angle-left f_l" aria-hidden="true"></i> 
        <span>医生列表</span>
        <a href="" class="f_r">
            <img src="images/find.png" alt="" class="doc-head-i">
        </a>
    </div>
    <div class="doc-section-list">
        <div class="margin-body-s"></div>
        <div class="doc-li-contain">
            <div class="doc-cont-top">
            <div class="cont-top-le">您查阅的是:<i>中医科</i>的医生</div>
                <div class="cont-top-r">
                    <i></i>
                    <button class="cont-top  active">人气<span class="fa fa-angle-down"></span></button>
                    <button class="cont-top ">好评<span class="fa fa-angle-down "></span></button>
                </div>
            </div>
            <div class="doc-cont-bottom">
                <ul>
                    <li>
                    	<a href="" class="cont-bot-a">
	                        <div class="cont-bot-le">
	                             <img src="images/15.jpg" alt="">
	                        </div>
    	                    <div class="cont-bot-ri">
    	                        <div class="bot-ri-text">
    	                            <span>张舒媛</span>
    	                            <span class="ri-text-t">主任医师</span>
    	                            <div class="bot-ri-zan">
    	                                <img src="images/handzan.png" alt="">
    	                                <span>345</span>
    	                            </div>
    	                        </div>
    	                        <p class="bot-ri-sec"><span class="ri-sec-fir">北京同仁医院02313221</span><span class="ri-sec-sec">皮肤科</span></p>
    	                        <p class="bot-ri-thi">擅长治疗偏头疼肚子痛疗偏头疼肚子痛头头痛头痛头痛头痛</p>
    	                    </div>
	                     </a>
                    </li>
                     <li>
                        <a href="" class="cont-bot-a">
                            <div class="cont-bot-le">
                                 <img src="images/15.jpg" alt="">
                            </div>
                            <div class="cont-bot-ri">
                                <div class="bot-ri-text">
                                    <span>张舒媛</span>
                                    <span class="ri-text-t">主任医师</span>
                                    <div class="bot-ri-zan">
                                        <img src="images/handzan.png" alt="">
                                        <span>345</span>
                                    </div>
                                </div>
                                <p class="bot-ri-sec"><span class="ri-sec-fir">北京同仁医院02313221</span><span class="ri-sec-sec">皮肤科</span></p>
                                <p class="bot-ri-thi">擅长治疗偏头疼肚子痛疗偏头疼肚子痛头头痛头痛头痛头痛</p>
                            </div>
                         </a>
                    </li>
                     <li>
                        <a href="" class="cont-bot-a">
                            <div class="cont-bot-le">
                                 <img src="images/15.jpg" alt="">
                            </div>
                            <div class="cont-bot-ri">
                                <div class="bot-ri-text">
                                    <span>张舒媛</span>
                                    <span class="ri-text-t">主任医师</span>
                                    <div class="bot-ri-zan">
                                        <img src="images/handzan.png" alt="">
                                        <span>345</span>
                                    </div>
                                </div>
                                <p class="bot-ri-sec"><span class="ri-sec-fir">北京同仁医院02313221</span><span class="ri-sec-sec">皮肤科</span></p>
                                <p class="bot-ri-thi">擅长治疗偏头疼肚子痛疗偏头疼肚子痛头头痛头痛头痛头痛</p>
                            </div>
                         </a>
                    </li>
                     <li>
                        <a href="" class="cont-bot-a">
                            <div class="cont-bot-le">
                                 <img src="images/15.jpg" alt="">
                            </div>
                            <div class="cont-bot-ri">
                                <div class="bot-ri-text">
                                    <span>张舒媛</span>
                                    <span class="ri-text-t">主任医师</span>
                                    <div class="bot-ri-zan">
                                        <img src="images/handzan.png" alt="">
                                        <span>345</span>
                                    </div>
                                </div>
                                <p class="bot-ri-sec"><span class="ri-sec-fir">北京同仁医院02313221</span><span class="ri-sec-sec">皮肤科</span></p>
                                <p class="bot-ri-thi">擅长治疗偏头疼肚子痛疗偏头疼肚子痛头头痛头痛头痛头痛</p>
                            </div>
                         </a>
                    </li>
                     <li>
                        <a href="" class="cont-bot-a">
                            <div class="cont-bot-le">
                                 <img src="images/15.jpg" alt="">
                            </div>
                            <div class="cont-bot-ri">
                                <div class="bot-ri-text">
                                    <span>张舒媛</span>
                                    <span class="ri-text-t">主任医师</span>
                                    <div class="bot-ri-zan">
                                        <img src="images/handzan.png" alt="">
                                        <span>345</span>
                                    </div>
                                </div>
                                <p class="bot-ri-sec"><span class="ri-sec-fir">北京同仁医院02313221</span><span class="ri-sec-sec">皮肤科</span></p>
                                <p class="bot-ri-thi">擅长治疗偏头疼肚子痛疗偏头疼肚子痛头头痛头痛头痛头痛</p>
                            </div>
                         </a>
                    </li>
                   <li>
                        <a href="" class="cont-bot-a">
                            <div class="cont-bot-le">
                                 <img src="images/15.jpg" alt="">
                            </div>
                            <div class="cont-bot-ri">
                                <div class="bot-ri-text">
                                    <span>张舒媛</span>
                                    <span class="ri-text-t">主任医师</span>
                                    <div class="bot-ri-zan">
                                        <img src="images/handzan.png" alt="">
                                        <span>345</span>
                                    </div>
                                </div>
                                <p class="bot-ri-sec"><span class="ri-sec-fir">北京同仁医院02313221</span><span class="ri-sec-sec">皮肤科</span></p>
                                <p class="bot-ri-thi">擅长治疗偏头疼肚子痛疗偏头疼肚子痛头头痛头痛头痛头痛</p>
                            </div>
                         </a>
                    </li>
                    <li>
                        <a href="" class="cont-bot-a">
                            <div class="cont-bot-le">
                                 <img src="images/15.jpg" alt="">
                            </div>
                            <div class="cont-bot-ri">
                                <div class="bot-ri-text">
                                    <span>张舒媛</span>
                                    <span class="ri-text-t">主任医师</span>
                                    <div class="bot-ri-zan">
                                        <img src="images/handzan.png" alt="">
                                        <span>345</span>
                                    </div>
                                </div>
                                <p class="bot-ri-sec"><span class="ri-sec-fir">北京同仁医院02313221</span><span class="ri-sec-sec">皮肤科</span></p>
                                <p class="bot-ri-thi">擅长治疗偏头疼肚子痛疗偏头疼肚子痛头头痛头痛头痛头痛</p>
                            </div>
                         </a>
                    </li>
                    <li>
                        <a href="" class="cont-bot-a">
                            <div class="cont-bot-le">
                                 <img src="images/15.jpg" alt="">
                            </div>
                            <div class="cont-bot-ri">
                                <div class="bot-ri-text">
                                    <span>张舒媛</span>
                                    <span class="ri-text-t">主任医师</span>
                                    <div class="bot-ri-zan">
                                        <img src="images/handzan.png" alt="">
                                        <span>345</span>
                                    </div>
                                </div>
                                <p class="bot-ri-sec"><span class="ri-sec-fir">北京同仁医院02313221</span><span class="ri-sec-sec">皮肤科</span></p>
                                <p class="bot-ri-thi">擅长治疗偏头疼肚子痛疗偏头疼肚子痛头头痛头痛头痛头痛</p>
                            </div>
                         </a>
                    </li>
                    <li>
                        <a href="" class="cont-bot-a">
                            <div class="cont-bot-le">
                                 <img src="images/15.jpg" alt="">
                            </div>
                            <div class="cont-bot-ri">
                                <div class="bot-ri-text">
                                    <span>张舒媛</span>
                                    <span class="ri-text-t">主任医师</span>
                                    <div class="bot-ri-zan">
                                        <img src="images/handzan.png" alt="">
                                        <span>345</span>
                                    </div>
                                </div>
                                <p class="bot-ri-sec"><span class="ri-sec-fir">北京同仁医院02313221</span><span class="ri-sec-sec">皮肤科</span></p>
                                <p class="bot-ri-thi">擅长治疗偏头疼肚子痛疗偏头疼肚子痛头头痛头痛头痛头痛</p>
                            </div>
                         </a>
                    </li>
                </ul>
                <div class="load-more">点击加载更多...</div>
            </div>
        </div>
    </div>
</div>
<script>
$(function(){
    // 人气好评排序按钮
    $('.cont-top').on("tap",function() {
    $('.cont-top').removeClass('active');
    $(this).addClass('active');
    });
    // 顶部定位导航
    var sub_classify =$('.doc-cont-top')[0];
    window.onscroll = function(){
        var mTop = sub_classify.offsetTop;
        var sTop = document.body.scrollTop;
        console.log(mTop)
        console.log(sTop);
        var result = mTop - sTop; 
        if(result<=0){
            $(sub_classify).css({"position":"fixed",'top':"0","z-index":"999"}) ;
        }
        if(sTop<50){
            sub_classify.removeAttribute("style");
        }
    };

    // 字体个数超出范围加...
    var p_span =$(".ri-sec-fir");
    var p_val = $(".ri-sec-fir").text();

    var p_val_len = p_val.length;
    if (p_val_len>8) {
       $(p_span).html(p_val.split("").slice(0,8).join("")+"...");
    } ;
    var p_t =$(".bot-ri-thi");
    var p_val_t = $(".bot-ri-thi").text();
    var p_val_len_t = p_val_t.length;
    if (p_val_len_t>19) {
       $(p_t).html(p_val_t.split("").slice(0,19).join("")+"...");
    } ;
})              
</script>
</body>
</html>